





let BaseView = require('../BaseView');
const DefaultBallSpeed = 1.3;

let templateDiv = `
            <label>出球设置</label>
            <div>
                球的种类:<input class="mini_input" id="typeCount" type="number" value="0"><br/>
                球的个数:<input class="mini_input" id="ballCount" type="number" value="0"><br/>
                冰球个数:<input class="mini_input" id="frozenCount" type="number" value="0"><br/>
                石头球个数:<input class="mini_input" id="stoneCount" type="number" value="0"><br/>
                死神球个数:<input class="mini_input" id="deadCount" type="number" value="0"><br/>
                出球速度:<input class="mini_input" id="ballSpeed" type="number" step="0.1"> <br/>
            </div>
`;


let doubleBind = require('../../doubleBind');

class BallCountView extends  BaseView{
    constructor() {
        super();

        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('border');
        this.rootEl.innerHTML = templateDiv;

        this.bindModel();
        this.reset();
    }

    bindModel(){
        let lst = [];
        lst.push({
            el:this.rootEl.querySelector('#typeCount'),
            name:'typeCount',
            domName:'input',
            bNumber:true,
        });
        lst.push({
            el:this.rootEl.querySelector('#ballCount'),
            name:'ballCount',
            domName:'input',
            bNumber:true,
        });
        lst.push({
            el:this.rootEl.querySelector('#frozenCount'),
            name:'frozenCount',
            domName:'input',
            bNumber:true,
        });
        lst.push({
            el:this.rootEl.querySelector('#stoneCount'),
            name:'stoneCount',
            domName:'input',
            bNumber:true,
        });
        lst.push({
            el:this.rootEl.querySelector('#deadCount'),
            name:'deadCount',
            domName:'input',
            bNumber:true,
        });

        lst.push({
            el:this.rootEl.querySelector('#ballSpeed'),
            name:'ballSpeed',
            domName:'input',
            bNumber:true,
        });

        this.model = {};
        lst.forEach(item=>{
            doubleBind(this.model,item);
        });
    }
    reset(){
        this.model.typeCount = 4;
        this.model.ballCount = 60;
        this.model.frozenCount = 0;
        this.model.stoneCount = 0;
        this.model.deadCount = 0;
        this.model.ballSpeed = DefaultBallSpeed;
    }

    parseBallCount(jsonData){
        this.model.typeCount = jsonData.tc || 0;
        this.model.ballCount = jsonData.bc || 0;
        this.model.frozenCount = jsonData.fc || 0;
        this.model.stoneCount = jsonData.sc || 0;
        this.model.deadCount = jsonData.dc || 0;
        this.model.ballSpeed = jsonData.ballSpeed || DefaultBallSpeed;
    }
}
module.exports = BallCountView;
